<template>
	<view class="main-page" style="align-items: center;">
		<image class="header-bg" src="../../static/common/bg_header_appoint.png" v-if="!hideSwitch"></image>
		<image class="header-bg-short" src="../../static/common/bg_header_appoint_short.png" v-if="hideSwitch"></image>
		<text class="title">预约</text>
		<view class="switch-box" v-if="!hideSwitch">
			<view class="chosen-switch" v-if="commitParams.type == 0">
				<image class="switch-bg" src="../../static/common/ic_left_chosen.png"></image>
				<view class="row-container ml-110" style="position: relative;">
					<view class="chosen-switch-flag"></view>
					<text class="font-333-36 font-weight-600" style="z-index: 60;">单客预约</text>
				</view>
			</view>
			<view class="default-switch" v-if="commitParams.type == 1" @click="changePageType(0)">
				<image class="switch-bg" src="../../static/common/ic_left_default.png"></image>
				<text class="font-fff-32 font-weight-600 ml-86 mt-18" style="z-index: 60;">单客预约</text>
			</view>
			
			<view class="default-switch" style="justify-content: flex-end;" @click="changePageType(1)"
			v-if="commitParams.type == 0">
				<image class="switch-bg" src="../../static/common/ic_right_default.png"></image>
				<text class="font-fff-32 font-weight-600 mr-86 mt-18" style="z-index: 60;">多客预约</text>
			</view>
			<view class="chosen-switch" style="justify-content: flex-end;" v-if="commitParams.type == 1">
				<image class="switch-bg" src="../../static/common/ic_right_chosen.png"></image>
				<view class="row-container-end mr-110" style="position: relative;">
					<view class="chosen-switch-flag"></view>
					<text class="font-333-36 font-weight-600" style="z-index: 60;">多客预约</text>
				</view>
			</view>
		</view>
		
		<!-- 单客预约-->
		<view class="custom-area" 
		:class="{'round-style' : hideSwitch , 'bottom-round-style' : !hideSwitch}"
		 v-if="commitParams.type == 0">
			<view class="row-container-row-between width-100p height-82">
				<view class="row-container">
					<text class="font-f94-28">*</text>
					<text class="font-666-28">姓名</text>
				</view>
				<view class="row-container">
					<input 
						v-model="commitParams.realName"
						placeholder="请输入用户姓名"
						:class="[commitParams.customId ? 'font-c0-28' : 'font-333-28']"
						:disabled="commitParams.customId"
						style="text-align: right;"
					/>
					<view class="row-container ml-30" style="flex-shrink: 0;" @click="gotoClientList">
						<text class="font-f94-28 font-weight-600">选择客户</text>
						<image class="wh-20" src="../../static/common/ic_arrow_right_red.png"></image>
					</view>
				</view>
			</view>
			<view class="row-container-row-between width-100p height-82">
				<view class="row-container">
					<text class="font-f94-28">*</text>
					<text class="font-666-28">性别</text>
				</view>
				<view class="row-container">
					<view class="row-container" @click="changeSex(1)">
						<image class="wh-32 mr-10" src="../../static/common/ic_chosen_true.png" v-if="commitParams.sex == 1 && !commitParams.customId"></image>
						<image class="wh-32 mr-10" src="../../static/common/ic_chosen_true_grey.png" v-if="commitParams.sex == 1 && commitParams.customId"></image>
						<image class="wh-32 mr-10" src="../../static/common/ic_chosen_false.png" v-if="commitParams.sex != 1"></image>
						<text class="font-weight-600" :class="[commitParams.customId ? 'font-c0-28' : 'font-333-28']">男</text>
					</view>
					<view class="row-container ml-34" @click="changeSex(0)">
						<image class="wh-32 mr-10" src="../../static/common/ic_chosen_true.png" v-if="commitParams.sex == 0 && !commitParams.customId"></image>
						<image class="wh-32 mr-10" src="../../static/common/ic_chosen_true_grey.png" v-if="commitParams.sex == 0 && commitParams.customId"></image>
						<image class="wh-32 mr-10" src="../../static/common/ic_chosen_false.png" v-if="commitParams.sex != 0"></image>
						<text class="font-weight-600" :class="[commitParams.customId ? 'font-c0-28' : 'font-333-28']">女</text>
					</view>
				</view>
			</view>
			<view class="row-container-row-between width-100p height-82">
				<view class="row-container">
					<text class="font-f94-28">*</text>
					<text class="font-666-28">电话</text>
				</view>
				<input
					v-model="commitParams.mobile"
					placeholder="请输入用户联系电话"
					:class="[commitParams.customId ? 'font-c0-28' : 'font-333-28']"
					type="number"
					:disabled="commitParams.customId"
					style="text-align: right;"
				/>
			</view>
			<view class="divider-1" style="width: 100%;"></view>
			<view class="reset-box" @click="clickReset">
				<text class="font-f94-26 mb-24" v-if="commitParams.customId">从客户名单中选择的客户无法直接修改客户信息，如需修改请点击下方“重置客户信息”按钮。</text>
				<view class="row-container-center width-100p">
					<image class="reset-ic" src="../../static/common/ic_reset_red.png" v-if="commitParams.customId"></image>
					<image class="reset-ic" src="../../static/common/ic_reset.png" v-else></image>
					<text class="font-f94-28 font-weight-600" v-if="commitParams.customId">重置客户信息</text>
					<text class="font-999-28 " v-else>重置客户信息</text>
				</view>
			</view>
		</view>
		
		<!-- 多客预约 -->
		<view class="custom-area"
		 :class="{'round-style' : hideSwitch , 'bottom-round-style' : !hideSwitch}"
		 v-if="commitParams.type == 1">
			<view class="row-container-row-between width-100p height-82">
				<view class="row-container">
					<text class="font-f94-28">*</text>
					<text class="font-666-28">本次预约人数</text>
				</view>
				<view class="row-container">
					<input 
						v-model="commitParams.joinCount"
						placeholder="请输入大于1的数字"
						class="font-333-28"
						style="text-align: right;"
						type="number"
					/>
					<text class="font-999-28 ml-4">人</text>
				</view>
			</view>
			
			<view class="row-container-row-between width-100p height-82" @click="gotoChosenMultiClient">
				<view class="row-container">
					<text class="font-f94-28">*</text>
					<text class="font-666-28">需要预约的客户</text>
				</view>
				<view class="row-container">
					<text class="font-333-28 font-weight-600">{{chosenMultiClientList.length > 0 ? '已选' + chosenMultiClientList.length : '请选择'}}</text>
					<image class="wh-20 ml-4" src="../../static/common/ic_arrow_right.png"></image>
				</view>
			</view>
			
			<view class="column-container width-100p" v-if="chosenMultiClientList.length > 0">
				<view class="single-client-box" 
				v-for="(singleClientItem , singleClientIndex) in showChosenClientList"
				:key="singleClientIndex">
					<view class="row-container">
						<image class="wh-36" src="../../static/common/ic_avatar_male.png"
							v-if="singleClientItem.sex == 1"></image>
						<image class="wh-36" src="../../static/common/ic_avatar_female.png"
							v-if="singleClientItem.sex == 0"></image>
						<text class="font-333-26 font-weight-600 ml-15">
						{{singleClientItem.customId}}  |  {{singleClientItem.realName}} | {{singleClientItem.sex == 1 ? '男' :'女'}}  |  {{singleClientItem.mobile}}</text>	
					</view>
					<image class="wh-32" src="../../static/common/ic_remove.png"  @click="handleDeleteChosenClient(singleClientItem)"></image>
				</view>
			</view>
			
			<view class="row-container-center width-100p height-44 mb-24" 
			v-if="chosenMultiClientList.length > 3" @click="changeShowAllChosenClient">
				<text class="font-f94-24 font-weight-600">{{showAllChosenClient ? '收起全部' : '展开全部'}}</text>
				<image class="wh-20 ml-10" src="../../static/common/ic_arrow_up_red.png" v-if="showAllChosenClient"></image>
				<image class="wh-20 ml-10" src="../../static/common/ic_arrow_down_red.png" v-else></image>
			</view>
		</view>
		
		
		<!-- 预约表单 -->
		<view class="high-box">
			<view class="row-container-row-between width-100p height-82">
				<view class="row-container">
					<text class="font-f94-28">*</text>
					<text class="font-666-28">预约类型</text>
				</view>
				<view class="row-container">
					<view class="row-container" @click="changeAppointType(0)">
						<image class="wh-32 mr-10" src="../../static/common/ic_chosen_true.png" 
						v-if="commitParams.yyType == 0"></image>
						<image class="wh-32 mr-10" src="../../static/common/ic_chosen_false.png"
						 v-if="commitParams.yyType != 0"></image>
						<text class="font-weight-600 font-333-28">{{checkBoss?'预约店员':'普通项目'}}</text>
					</view>
					<view class="row-container ml-34" @click="changeAppointType(1)">
						<image class="wh-32 mr-10" src="../../static/common/ic_chosen_true.png" 
						v-if="commitParams.yyType == 1"></image>
						<image class="wh-32 mr-10" src="../../static/common/ic_chosen_false.png"
						 v-if="commitParams.yyType != 1"></image>
						<text class="font-weight-600 font-333-28">预约设备</text>
					</view>
				</view>
			</view>
			
			<!-- 预约店员时的选择店员 -->
			<view class="row-container-row-between width-100p height-82" 
			v-if="commitParams.yyType == 0 && checkBoss == 0">
				<view class="row-container">
					<text class="font-f94-28">*</text>
					<text class="font-666-28">店员</text>
				</view>
				<picker class="width-70p" mode="selector" 
				:range="deviceStaffList" 
				range-key="name"
				@change="changeDeviceStaff">
					<view class="row-container-end width-100p">
						<text class="font-333-28 font-weight-600">
						{{commitParams.deviceName ? commitParams.deviceName :'请选择店员'}}</text>
						<image class="wh-20 ml-4" src="../../static/common/ic_arrow_right.png"></image>
					</view>
				</picker>
			</view>
			
			<!-- 选择预约设备时的设备列表 -->
			<view class="column-container width-100p" v-if="commitParams.yyType == 1">
				<view class="row-container width-100p height-82">
					<text class="font-f94-28">*</text>
					<text class="font-666-28">设备</text>
				</view>
				
				<view class="row-container width-100p" style="flex-wrap: wrap;">
					<view class="row-container mr-15 mb-20" 
					v-for="(bedItem , bedIndex) in bedList" 
					:key="bedIndex" @click="changeBed(bedItem)">
						<text class="chosen-device" v-if="commitParams.deviceId == bedItem.id">
							{{bedItem.name}}
						</text>
						<text class="default-device" v-else>
							{{bedItem.name}}
						</text>
					</view>
				</view>
			</view>
			
			<view class="row-container-row-between width-100p height-82"
			 v-if="checkBoss == 0 && commitParams.yyType == 1">
				<view class="row-container">
					<text class="font-f94-28">*</text>
					<text class="font-666-28">操作员</text>
				</view>
				<picker mode="selector" v-model="commitParams.staffId" :range="allEmployeeList"
				 @change="changeLinkEmployee" range-key="userName">
					<view class="row-container">
						<text class="font-333-28 font-bold">
						{{commitParams.staffName ? commitParams.staffName:'请选择店员'}}</text>
						<image class="wh-20 ml-4" src="../../static/common/ic_arrow_right.png"></image>
					</view>
				</picker>
			</view>
			
			<view class="row-container-row-between width-100p height-82">
				<view class="row-container">
					<text class="font-f94-28">*</text>
					<text class="font-666-28">日期</text>
				</view>
				<picker mode="date" v-model="date" @change="changeDate" :start="minDate" :end="maxDate">
					<view class="row-container">
						<text class="font-333-28 font-bold">{{date ? date:'请选择日期'}}</text>
						<image class="wh-20 ml-4" src="../../static/common/ic_arrow_right.png"></image>
					</view>
				</picker>
			</view>
			
			<view class="row-container-row-between width-100p height-82">
				<view class="row-container">
					<text class="font-f94-28">*</text>
					<text class="font-666-28">开始时间</text>
				</view>
				<picker mode="multiSelector" v-model="startHour" :range="hourAndMinList"
				@change="changeStartTime" >
					<view class="row-container">
						<text class="font-333-28 font-bold">{{startHour ? startHour:'请选择开始时间'}}</text>
						<image class="wh-20 ml-4" src="../../static/common/ic_arrow_right.png"></image>
					</view>
				</picker>
			</view>
			
			<view class="row-container-row-between width-100p height-82">
				<view class="row-container">
					<text class="font-f94-28">*</text>
					<text class="font-666-28">结束时间</text>
				</view>
				<picker mode="multiSelector" v-model="endHour" :range="hourAndMinList"
				 @change="changeEndTime">
					<view class="row-container">
						<text class="font-333-28 font-bold">{{endHour ? endHour:'请选择结束时间'}}</text>
						<image class="wh-20 ml-4" src="../../static/common/ic_arrow_right.png"></image>
					</view>
				</picker>
			</view>
		</view>
		
		
		<view class="high-box mb-195" style="flex-direction: column;">
			<text class="font-666-28 height-88" style="line-height: 88rpx;">预约情况</text>
			<view class="list-item" v-if="morningTimeList && morningTimeList.length > 0">
				<text class="font-333-28 font-weight-600 width-126" style="flex-shrink: 0;">上午</text>
				<view class="row-container" style="flex-wrap: wrap;">
					<view class="single-time-box" v-for="(timeItem,timeIndex) in morningTimeList" 
					:key="timeIndex">
						<text class="font-333-24 font-weight-600">{{timeItem.startTime + "-" + timeItem.endTime}}</text>
						<view class="line"></view>
						<text class="font-3cb-24 font-weight-600">已预约</text>
					</view>
				</view>
			</view>
			<view class="divider-1 mt-24" style="width: 100%;" v-if="morningTimeList && morningTimeList.length > 0"></view>
			<view class="list-item" v-if="afternoonTimeList && afternoonTimeList.length > 0">
				<text class="font-333-28 font-weight-600 width-126" style="flex-shrink: 0;">下午</text>
				<view class="row-container" style="flex-wrap: wrap;">
					<view class="single-time-box" v-for="(timeItem,timeIndex) in afternoonTimeList" 
					:key="timeIndex">
						<text class="font-333-24 font-weight-600">{{timeItem.startTime + "-" + timeItem.endTime}}</text>
						<view class="line"></view>
						<text class="font-3cb-24 font-weight-600">已预约</text>
					</view>
				</view>
			</view>
			<view class="divider-1 mt-24" style="width: 100%;" v-if="afternoonTimeList && afternoonTimeList.length > 0"></view>
			<view class="list-item" v-if="eveningTimeList && eveningTimeList.length > 0">
				<text class="font-333-28 font-weight-600 width-126" style="flex-shrink: 0;">晚上</text>
				<view class="row-container" style="flex-wrap: wrap;">
					<view class="single-time-box" v-for="(timeItem,timeIndex) in eveningTimeList" 
					:key="timeIndex">
						<text class="font-333-24 font-weight-600">{{timeItem.startTime + "-" + timeItem.endTime}}</text>
						<view class="line"></view>
						<text class="font-3cb-24 font-weight-600">已预约</text>
					</view>
				</view>
			</view>
			
			<view class="column-container-center width-100p pb-100" v-if="(!morningTimeList || morningTimeList.length < 1)
			 && (!afternoonTimeList || afternoonTimeList.length < 1) && (!eveningTimeList || eveningTimeList.length < 1)">
				<image class="empty-ic" src="../../static/common/ic_no_client.png"></image>
				<text class="font-666-28">暂无预约</text>
			</view>
		</view>
		
		<view class="bottom-box">
			<text class="red-btn ml-30 mt-40" v-if="canCommit" @click="handleCommit">确定添加</text>
			<text class="red-negative-btn ml-30 mt-40" v-else>确定添加</text>
		</view>
		
		<setHintWindow ref="setHintWindowRef" class="width-100p"></setHintWindow>
		
		<!-- 重置信息确认弹窗 -->
		<view class="window-main" v-show="showResetWindow">
			<view class="reset-window">
				<text class="font-333-36 font-weight-600">确认重置客户信息吗？</text>
				<view class="row-container mt-40 width-100p">
					<text class="cancel-btn" @click="showResetWindow = false">取消</text>
					<text class="confirm-btn" @click="handleConfirmReset">确定</text>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import setHintWindow from '../../components/setHintWindow.vue'
	import constant from '../../utils/constant.js'
	
	export default {
		data() {
			return {
				checkBoss:-1 , // 是否为老板  0是 其他否
				checkOpenSyy:0 , // 是否开启多人预约
				checkOpenDyy:0 , // 是否开启单人预约
				hideSwitch:false , // 是否隐藏切换多人单人  如果只开启单人或只开启多人 隐藏 都开了就显示
				
				commitParams:{
					type:0 ,  // 0单客预约   1多客预约
					yyType:0 , // 0预约店员  1预约设备
					realName:'',
					mobile:'',
					sex:0,
					customId:'',
					startTime:"",
					endTime: "",
					deviceId:'',
					deviceName:'',
					joinCount:'',
					staffId:'', // 关联的操作员
					staffName:'' , // 关联的操作员
					
					customList:[],
				},
				date:'',
				startHour:'',
				endHour:'',
				bedList:[],  // 设备列表
				morningTimeList:[],
				afternoonTimeList:[],
				eveningTimeList:[],
				
				hourList:[] , // 可选的小时列表
				minList:['00' , '05' , '10' , '15' , '20', '25' , '30',	
						'35' , '40' , '45' , '50' , '55'] , // 可选的分钟列表
				hourAndMinList:[] , // 小时分钟列表
				
				
				maxHour:'' , // 最晚的时间
				minHour:'' , // 最早的时间
				minDate:'' , // 可选择的最小日期
				maxDate:'' , // 可选择的最大日期
				
				showResetWindow:false , // 重置客户信息弹窗
				allEmployeeList:[] , // 全部的店员列表
				deviceStaffList:[] , // 设备里的店员列表
				
				chosenMultiClientList:[] , // 已选择的多位客户列表
				showChosenClientList:[],  //展示的选择客户列表  不展开显示3条  展开显示全部
				showAllChosenClient:false , // 是否显示全部已选择的客户
				
				deviceStaffId:'' , // 设备店员的staffId
			}
		},
		
		computed:{
			canCommit: function(){
				return this.date && this.startHour && this.endHour &&
			 (this.commitParams.type == 0 && (this.commitParams.realName && this.commitParams.mobile)
			 || this.commitParams.type == 1 && (this.commitParams.joinCount && this.chosenMultiClientList.length > 0))
			}
		},
		
		components:{
			setHintWindow
		},
		
		onLoad() {
			let that = this
			uni.$on('chosenClient' , (data)=>{
				console.log('changeChosenClient----' , data)
				
				that.commitParams.realName = data.realName
				that.commitParams.mobile = data.mobile
				that.commitParams.sex = data.sex
				that.commitParams.customId = data.id
				
			})
			
			uni.$on('refreshBedList' , ()=>{
				that.loadBedList()
			})
			
			uni.$on('refreshEmployeeList',()=>{
				that.loadAllEmployee()
			})
			
			uni.$on('chosenMultiClient' , (data)=>{
				that.chosenMultiClientList = data
				that.showAllChosenClient = false
				that.initShowChosenClientList()
			})
			
			this.loadBedList()
			this.loadAllEmployee()
		},
		
		onShow() {
			this.maxHour = this.cookie.get("ap_user_data").shopEndTime
			this.minHour = this.cookie.get("ap_user_data").shopStartTime
			this.checkBoss = this.cookie.get("ap_user_data").checkBoss
			this.checkOpenDyy = this.cookie.get("ap_user_data").checkOpenDyy
			this.checkOpenSyy = this.cookie.get("ap_user_data").checkOpenSyy
			
			if (this.checkOpenDyy == 1 && this.checkOpenSyy != 1){
				//只开启单人
				this.hideSwitch = true
				this.commitParams.type = 0
			} else if (this.checkOpenDyy != 1 && this.checkOpenSyy == 1){
				//只开启多人
				this.hideSwitch = true
				this.commitParams.type = 1
			} else if (this.checkOpenDyy == 1 && this.checkOpenSyy == 1){
				//都开启
				this.hideSwitch = false
			}
			console.log('checkboss----' , this.checkBoss)
			
			if (!this.minHour || !this.maxHour){
				this.loadUserDetail()
			} else{
				this.initTimeList()
			}
			
			let now = new Date()
			this.minDate = now.toISOString().split('T')[0]
			this.maxDate = new Date(now.setDate(now.getDate() + 30))
			
			let that = this
			uni.$emit("refreshBedList" , ()=>{	
				that.loadBedList()
			})
			
		},
		
		methods: {
			handleClearParams(){
				Object.keys(this.commitParams).forEach((key) => {
					if (key != 'type'){
						if (key == 'yyType' || key == 'sex'){
							this.commitParams[key] = 0
						} else if(key == 'customList'){
							this.commitParams[key] = []
						} else{
							this.commitParams[key] = ""
						}
					}
				}); 
			},
			
			initShowChosenClientList(){
				this.showChosenClientList = []
				if (this.showAllChosenClient){
					this.showChosenClientList = this.chosenMultiClientList
				} else{
					if (this.chosenMultiClientList && this.chosenMultiClientList.length > 0){
						for(let i = 0 ; i < this.chosenMultiClientList.length ; i++){
							if (i < 3){
								this.showChosenClientList.push(this.chosenMultiClientList[i])
							}
						}
					}
				}
			},
			
			changeShowAllChosenClient(){
				this.showAllChosenClient = !this.showAllChosenClient
				this.initShowChosenClientList()
			},
			
			//修改单客预约和多客预约
			changePageType(type){
				this.commitParams.type = type
				if (type == 0){
					this.commitParams.customList = []
					this.commitParams.joinCount = ""
				} else if(type == 1){
					this.commitParams.realName = ""
					this.commitParams.customId = ""
					this.commitParams.mobile = ""
				}
			},
			
			changeDeviceStaff(e){
				this.commitParams.deviceId = this.deviceStaffList[e.detail.value].id
				this.commitParams.deviceName = this.deviceStaffList[e.detail.value].name
				this.deviceStaffId = this.deviceStaffList[e.detail.value].staffId
				
				console.log('device----' , this.commitParams.deviceId + '    ' + this.commitParams.deviceName)
				
				if (this.date){
					this.loadAppointList()
				}
			},
			
			//修改预约类型  0店员  1设备
			changeAppointType(yyType){
				this.commitParams.yyType = yyType
				this.commitParams.deviceId = ""
				this.commitParams.deviceName = ""
				this.commitParams.staffId = ""
				this.commitParams.staffName = ""
				this.deviceStaffId = ""
			},
			
			initTimeList(){
				if (this.hourList.length < 1){
					let starHour = parseInt(this.minHour.split(":")[0])
					let endHour = parseInt(this.maxHour.split(":")[0])
					let addHour = starHour
					while (addHour <= endHour){
						if (addHour<10){
							this.hourList.push("0" + addHour)
						} else{
							this.hourList.push(addHour)
						}
						addHour++
					}
					this.hourAndMinList = []
					this.hourAndMinList.push(this.hourList)
					this.hourAndMinList.push(this.minList)
				}
			},
			
			loadAllEmployee(){
				let that = this
				this.http({
					url:'/user/staffList',
					method:'POST',
					data:{
						pageNo: 1,
						pageSize: 1000,
						status:1
					},
					success(res){
						if (res.code == 200){
							that.allEmployeeList = res.data
						}
					},
					failed(e){
					}
				})
			},
			
			changeDate(e){
				this.date = e.detail.value
				this.loadAppointList()
			},
			
			changeStartTime(e){
				console.log('changeStartTime----' , e)
				this.startHour = this.hourList[e.detail.value[0]] + ":" + this.minList[e.detail.value[1]]
				if (this.endHour && this.endHour <= this.startHour){
					uni.showToast({
						title:'结束时间需晚于开始时间',
						icon:'none'
					})
					this.endHour = ""
				}
			},
			
			changeEndTime(e){
				// this.endHour = e.detail.value
				this.endHour = this.hourList[e.detail.value[0]] + ":" + this.minList[e.detail.value[1]]
				if (this.startHour && this.endHour <= this.startHour){
					uni.showToast({
						title:'结束时间需晚于开始时间',
						icon:'none'
					})
					this.endHour = ""
				}
			},
			
			changeSex(sex){
				if (this.commitParams.customId){
					return
				}
				this.commitParams.sex = sex
			},
			
			changeLinkEmployee(e){
				this.commitParams.staffId = this.allEmployeeList[e.detail.value].id
				this.commitParams.staffName = this.allEmployeeList[e.detail.value].userName
			},
			
			gotoClientList(){
				uni.navigateTo({
					url:'/pages/appointment/clientList'
				})
			},
			
			changeBed(item){
				this.commitParams.deviceId = item.id
				this.commitParams.deviceName = item.name
				this.loadAppointList()
			},
			
			loadUserDetail(){
				let that = this
				this.http({
					url:"/user/userDetail",
					method:"POST",
					hideLoading:true,
					data:{},
					success(data){
						if (data.code == 200){
							that.cookie.set("ap_user_data" , data.data)
							that.maxHour = data.data.shopEndTime
							that.minHour = data.data.shopStartTime
							that.initTimeList()
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			//根据时间和设备id加载预约数据
			loadAppointList(){
				if (!this.date || (this.checkBoss == 0 && !this.commitParams.deviceId)){
					return
				}
				
				let that = this
				this.http({
					url:'/yy/custom/findListByDate',
					method:'POST',
					data:{
						dayTime : this.date,
						deviceId : this.commitParams.deviceId
					},
					success(res){
						if (res.code == 200 && res.data){
							that.morningTimeList = res.data.morningList
							that.afternoonTimeList = res.data.afternoonList
							that.eveningTimeList = res.data.nightList
						}
					},
					failed(e){
					}
				})
			},
			
			//加载设备数据
			loadBedList(){
				let that = this
				this.http({
					url:'/user/device/findList',
					method:'POST',
					data:{
						pageNo: 1,
						pageSize: 1000
					},
					success(res){
						if (res.code == 200){
							that.bedList = []
							that.deviceStaffList=  []
							
							res.data.forEach((item)=>{
								if (item.staffId){
									that.deviceStaffList.push(item)
								} else{
									that.bedList.push(item)
								}
							})
							
							
							if (res.data.length < 1){
								that.$nextTick(()=>{
									that.$refs.setHintWindowRef.showSetHintWindow = true
								})
							}
							
						}
					},
					failed(e){
					}
				})
			},
			
			//提交预约
			handleCommit(){
				if (!this.utils.checkAuthority(constant.auth_add_appoint)){
					return
				}
				
				if (this.checkBoss == 0 && !this.commitParams.deviceId){
					let toastStr = '请选择店员'
					if (this.commitParams.yyType == 1){
						toastStr = '请选择设备'
					}
					uni.showToast({
						title:toastStr,
						icon:'none'
					})
					return
				}
				
				
				if (this.isTimeOverlap()){
					uni.showToast({
						title:'选择时间段已有预约',
						icon:'none'
					})
					return
				}
				
				let that = this
				
				this.commitParams.customList = []
				if (this.commitParams.type == 1){
					this.commitParams.customList = this.chosenMultiClientList
					console.log('customList---' , this.commitParams.customList)
				} else if (this.commitParams.type == 0){
					let customList = []
					let customItem = {'sex' : this.commitParams.sex ,
					 'realName' : this.commitParams.realName , 
					 'mobile' : this.commitParams.mobile , 
					 'customId' : this.commitParams.customId }
					customList.push(customItem)
					this.commitParams.customList = customList
				}
				
				if (this.commitParams.yyType == 0 && !this.commitParams.staffId){
					this.commitParams.staffId = this.deviceStaffId
				}
				
				this.commitParams.startTime = this.date + " " + this.startHour  + ":00"
				
				let startMill = new Date(this.commitParams.startTime).getTime()
				let currentMill = new Date().getTime()
				
				if (startMill <= currentMill){
					uni.showToast({
						title:'预约时间需晚于当前时间',
						icon:'none'
					})
					return
				}
				
				
				this.commitParams.endTime = this.date + " " + this.endHour + ":00"
				
				this.http({
					url:'/yy/custom/saveOrUpdateReservation',
					method:'POST',
					data:this.commitParams,
					header:{
						"content-type": "application/json",
						'Authorization': uni.getStorageSync("ap_token")
					},
					success(res){
						if (res.code == 200){
							that.handleClearParams()
							that.showChosenClientList = []
							that.chosenMultiClientList = []
							that.startHour = ""
							that.endHour = ""
							that.date = ""
							that.morningTimeList = []
							that.afternoonTimeList = []
							that.eveningTimeList = []
							uni.$emit("refreshIndexData")
						}
						setTimeout(()=>{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						},500)
					},
					failed(e){
					}
				})
				
				
			},
			
			isTimeOverlap(){
				let commitStartTime = this.startHour
				let commitEndTime = this.endHour
				
				let overlap = false
				
				if (this.morningTimeList && this.morningTimeList.length > 0){
					for (let i = 0 ; i < this.morningTimeList.length ; i ++){
						let item = this.morningTimeList[i]
						if (commitEndTime <= item.startTime || item.endTime <= commitStartTime){
							
						} else{
							overlap = true
							break
						}
					}
				}
				
				if (!overlap && this.afternoonTimeList && this.afternoonTimeList.length > 0){
					for (let i = 0 ; i < this.afternoonTimeList.length ; i ++){
						let item = this.afternoonTimeList[i]
						if (commitEndTime <= item.startTime || item.endTime <= commitStartTime){
						} else{
							overlap = true
							break
						}
					}
				}
				
				if (!overlap  && this.eveningTimeList && this.eveningTimeList.length > 0){
					for (let i = 0 ; i < this.eveningTimeList.length ; i ++){
						let item = this.eveningTimeList[i]
						if (commitEndTime <= item.startTime || item.endTime <= commitStartTime){
						} else{
							overlap = true
							break
						}
					}
				}
				return overlap
			},
			
			//点击重置
			clickReset(){
				if (this.commitParams.customId){
					this.showResetWindow = true
				}
			},
			
			//重置客户信息
			handleConfirmReset(){
				this.commitParams.realName = ""
				this.commitParams.customId = ""
				this.commitParams.mobile = ""
				this.commitParams.sex = 0
				this.showResetWindow = false
			},
			
			//多选客户
			gotoChosenMultiClient(){
				if (this.commitParams.joinCount <= 1){
					uni.showToast({
						title:'请输入大于1的数字',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/appointment/multiClientList?joinCount=' 
					+ this.commitParams.joinCount + "&chosenList=" + JSON.stringify(this.chosenMultiClientList)
				})
			},
			
			//删除已选的客户 （多选）
			handleDeleteChosenClient(item){
				let index = this.chosenMultiClientList.findIndex((chosenItem) => chosenItem.id == item.id)
				if (index != -1){
					this.chosenMultiClientList.splice(index , 1)
				}
				if (this.chosenMultiClientList.length <= 3){
					this.showAllChosenClient = false
				}
				this.initShowChosenClientList()
			}
			
			
			
		}
	}
</script>

<style lang="scss">
	.header-bg{
		width: 100%;
		height: 413rpx;
		position: absolute;
		top: 0rpx;
	}
	
	.header-bg-short{
		width: 100%;
		height: 304rpx;
		position: absolute;
		top: 0rpx;
	}
	
	.title{
		color: white;
		font-size: 36rpx;
		font-weight: 600;
		width: 100%;
		text-align: center;
		line-height: 88rpx;
		height: 88rpx;
		margin-top: 88rpx;
		margin-bottom: 20rpx;
		z-index: 50;
	}
	
	.switch-box{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		position: relative;
		width: calc(100% - 60rpx);
		height: 114rpx;

		.default-switch{
			display: flex;
			flex-direction: row;
			width: 100%;
			height: 97rpx;
			position: absolute;
		}
		
		.chosen-switch{
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 114rpx;
			position: absolute;
		}
		
		.switch-bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
		}
		
		.chosen-switch-flag{
			background: linear-gradient(90deg, #F94C4B 0%, rgba(249, 76, 75, 0) 100%);
			width: 144rpx;
			height: 8rpx;
			position: absolute;
			bottom: 0;
		}
	}
	
	.round-style{
		border-radius: 16rpx;
	}
	
	.bottom-round-style{
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
	}
	
	.custom-area{
		display: flex;
		flex-direction: column;
		width: calc(100% - 108rpx);
		margin: 0rpx 30rpx;
		padding: 0rpx 24rpx;
		background: white;
		z-index: 50;
		
		.single-client-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 32rpx);
			height: 68rpx;
			background: #FBFBFB;
			border: 1rpx solid #ECECEC;
			margin-bottom: 20rpx;
			padding: 0rpx 16rpx;
		}
	}
	
	.single-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 60rpx);
		height: 88rpx;
		background: white;
		padding: 0rpx 30rpx;
	}
	
	.reset-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: calc(100% - 60rpx);
		background: white;
		padding: 24rpx 30rpx;
		
		.reset-ic{
			width: 26rpx;
			height: 26rpx;
			margin-right: 12rpx;
		}
	}
	
	.high-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 108rpx);
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 0rpx 24rpx;
		background: white;
		border-radius: 16rpx;
		
		.chosen-device{
			background: #F94C4B;
			border-radius: 8rpx;
			width: 200rpx;
			height: 69rpx;
			text-align: center;
			line-height: 69rpx;
			color: white;
			font-size: 28rpx;
			font-weight: 600;
		}
		
		.default-device{
			background: #F5F5F5;
			border-radius: 8rpx;
			width: 200rpx;
			height: 69rpx;
			text-align: center;
			line-height: 69rpx;
			color: #333333;
			font-size: 28rpx;
			font-weight: 600;
		}
	}
	
	.list-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		padding: 24rpx 0rpx 4rpx 0rpx;
		
		.single-time-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 8rpx 15rpx;
			border: #D9D9D9 solid 1rpx;
			border-radius: 26rpx;
			margin: 0rpx 0rpx 20rpx 20rpx;
			
			.line{
				width: 1rpx;
				height: 18rpx;
				background: #D9D9D9;
				margin: 0rpx 7rpx;
			}
		}
	}
	
	.empty-ic{
		width: 82rpx;
		height: 82rpx;
		margin-top: 40rpx;
		margin-bottom: 10rpx;
	}
	
	.bottom-box{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 195rpx;
		background: #F5F5F5;
		position: fixed;
		bottom: 0;
		z-index: 100;
	}
	
	.reset-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 190rpx);
		margin: 0rpx 70rpx;
		padding: 40rpx 25rpx;
		background: white;
		border-radius: 30rpx;
		
		.cancel-btn{
			height: 85rpx;
			flex-grow: 1;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin: 0rpx 15rpx;
			color: #333333;
			font-size: 32rpx;
			text-align: center;
			line-height: 85rpx;
		}
		
		.confirm-btn{
			height: 85rpx;
			flex-grow: 1;
			background: #F94C4B;
			border-radius: 10rpx;
			margin: 0rpx 15rpx;
			color: white;
			font-size: 32rpx;
			text-align: center;
			line-height: 85rpx;
		}
	}
	
</style>
